<template>
    <div class="pledgeLoan">
        <assets-head :title="$t('质押借币')"  :backFunc="() => $router.go('-1')">
            <div class="custom" @click="$router.push('/pledgeLoanOrder')">
                <img :src="require(`@/assets/theme/${THEME}/image/order.png`)"  alt="record-img" class="w-32 h-35 pr-30 " />
            </div>
        </assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/pledgeLoanBg.png" alt="" /></div>
            <div class="content mt-266 box-shad tabBackground">
                  <div class="mb-38">
                        <div class="font-32 textColor">{{$t('借款')}}</div>
                        <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor">
                            <input class="h-full pl-22 inputBackground1" type="number" v-model="loanAmount" @input="changeAmount" :placeholder="$t('借款数量')+`>=${loanAmountMin}`">
                            <div class="right w-252 h-62 flex items-center pl-26 box-border relative" @click="openSelect">
                                <img src="../../assets/image/usdtIcon.png" class="w-48 h-48" alt="">
                                <span class="ml-14 mr-30">USDT</span>
                                <img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                                <div class="slectBox"  v-show="isShow" @click.stop="isShow=false;">
                                    <div class="h-64 lh-64 border-b-color">Select</div>
                                    <div class="flex items-center h-80">
                                        <img src="../../assets/image/usdtIcon.png" class="w-40 h-40" alt="">
                                        <span class="ml-14 font-24 text-grey">USDT</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#E35461;">{{errorMsg?errorMsg:''}}</div>
                        <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34" @click="getLoanParam">{{$t('质押币')}}</div>
                  </div>
            </div>
            <div class="content mt-38 tabBackground">
                <div class="font-32 textColor">{{$t('质押')}}</div>
                <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor relative">
                    <input class="h-full pl-22 inputBackground1" type="number" v-model="pledgeAmount" @input="changeAmount" :placeholder="$t('请输入质押数量')">
                    <div class="right w-252 h-62 flex items-center pl-26 box-border" @click="openSelectBorrow">
                        <img :src="`${HOST_URL}/symbol/${pledgeCurrency.toLowerCase()}.png`" class="w-48 h-48" alt="" />
                        <span class="ml-14 mr-30 w-90">{{pledgeCurrency.toUpperCase()}}</span>
                        <img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                    </div>
                    <div class="slectBox slectBoxMax"  v-show="isShow1">
                        <div>
                            <div class="h-64 lh-64 border-b-color">Select</div>
                            <div class="flex items-center border-b-color justify-between" v-for="item in walletList" :key="item.symbol" @click.stop="selectCoin(item)">
                                <div class="flex items-center">
                                    <img :src="`${HOST_URL}/symbol/${item.symbol.toLowerCase()}.png`" class="w-40 h-40" alt="">
                                    <span class="ml-14 font-24 text-grey">{{item.symbol.toUpperCase()}}</span>
                                </div>
                                <div class="py-10">
                                    <div class="text-grey text-right">{{$t('总资产')}}:{{ item.volume }}</div>
                                    <div class="text-grey text-right">{{ $t('可用') }}:{{ item.usable }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center font-24 mt-16 text-grey" >
                    {{$t('可用余额')}}：<span class="mr-14">{{volume || '--'}}&nbsp;{{pledgeCurrency.toUpperCase()}}</span><img @click="$router.push('/exchange/exchangePage')" src="../../assets/image/exchangeIcon.png" class="w-28 h-28" alt=""> 
                </div>
                <div class="mt-48 font-32 textColor">{{$t('借币期限')}}</div>
                <div class="mt-20 font-24 text-grey">{{$t('提前还款不罚息')}}</div>
                <div class="flex items-center h-96 mt-20 inputBox inputBackground1 textColor" @click="showTerm= !showTerm">
                    <div class="pl-22 h-full inputBackground1 selectedCon"  >{{loanCycle+$t('天')}}</div>
                    <div class="iconBox mr-34"><img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" /></div>
                </div>
                <p class="mt-22 text-grey font-24 flex justify-between">
                    <span>{{$t('强平价格')}}（USDT/{{pledgeCurrency.toUpperCase()}}）</span>
                    <span class="textColor">{{closeOut || '--'}}</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{$t('质押率')}}</span>
                    <span class="textColor">{{pledgeRate!==''?(pledgeRate*10000/100).toFixed(2):'--'}}%</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{$t('小时利率')}}</span>
                    <span class="textColor">{{hourlyRate || '--' }}</span>
                </p>
                <p class="mt-24 text-grey font-24 flex justify-between">
                    <span>{{$t('日利率')}}</span>
                    <span class="textColor">{{isNaN(hourlyRate)?'--':hourlyRate*24}}</span>
                </p>
                <div class="queIcon mt-8" @click="showMask = true"><img src="../../assets/image/skyQuestion.png" class="w-24 h-24" alt=""></div>
                <p class="mt-48 font-32 text-grey flex justify-between">
                    <span>{{$t('总利息')}}</span>
                    <span class="textColor">{{interestAmount || '--'}}&nbsp;USDT</span>
                </p>
                <p class="mt-48 font-32 text-grey flex justify-between">
                    <span>{{$t('预计还款')}}</span>
                    <span class="textColor">{{debtAmount || '--'}}&nbsp;USDT</span>
                </p>
                <div class="mt-78 h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-48" @click="addOrder">{{$t('借币')}}</div>
            </div>
        </div>
        <van-action-sheet v-model="showTerm" :title="$t('选择期限')">
            <div class="pb-180">
                <van-radio-group v-model="radio" @change="changeDay">
                    <van-cell-group >
                        <van-cell :title="item+$t('天')" clickable @click="radio = index+1" v-for="(item,index) in dayList" :key="index">
                            <template #right-icon>
                                <van-radio :name="index+1" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </van-action-sheet>
        <rule-mask v-model="showMask"></rule-mask>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { ActionSheet, RadioGroup, Radio, Cell, CellGroup } from "vant";
import Axios from "@/API/pledgeLoan.js";
import { _getAllWallet } from "@/API/fund.api";
import { HOST_URL } from '@/config'
import { debounce } from '@/utils/utis'
import { THEME } from '@/config/theme'
import ruleMask from "./ruleMask.vue";
    export default {
        props: {

        },
        components: {
            assetsHead,
            [ActionSheet.name]: ActionSheet,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            ruleMask
        },
        data(){
            return {
                THEME,
                HOST_URL,
                showMask:false,
                errorMsg:'',
                radio:1,
                isShow:false,
                isShow1:false,
                showTerm:false,
                loanCycle:'',
                walletList:[],
                dayList:[],
                hourlyRate:'', //时利率
                loanAmountMin:'',//借款最小值
                loanAmount:'', //借款金额
                pledgeAmount: '', //质押金额
                pledgeCurrency:'', //质押币种
                volume:'', //可用余额
                pledgeRate:'', //质押率 
                closeOut:'', //强平价格
                debtAmount:'',//预计还款
                interestAmount:'--',//总利息
            }
        },
        mounted(){
            this.init()  
        },
        methods: {
            init(){
                this.getLoanConfig()
                this.getList()
            },
            openSelect(){
                this.isShow = !this.isShow
            },
            openSelectBorrow() {
                this.isShow1 = !this.isShow1
            },
            selectCoin(item){
                this.pledgeCurrency = item.symbol
                this.volume = item.usable
                this.isShow1 =false
            },
            changeDay(index){
                this.loanCycle = this.dayList[index*1-1]
                this.getLoanParam()
            },
            changeAmount(){
                if (this.pledgeAmount >= this.volume) {
                    this.pledgeAmount = this.volume
                }
                this.debounceFn()
            },
            getLoanConfig(){
                Axios.getLoanConfig().then(res=>{
                    this.dayList = res.data.loanCycle
                    this.loanCycle = this.dayList[0]
                    this.hourlyRate = res.data.hourlyRate
                    this.loanAmountMin = res.data.loanAmountMin
                })
            },
            compare(p, type) { //这是比较函数
                return function (m, n) {
                    var a = m[p];
                    var b = n[p];
                    if (a == b) {
                        return
                    }
                    if (type == 'up') {
                        return b - a; //升序
                    } else if (type == 'down') {
                        return a - b; //降序
                    } else {
                        return a - b;
                    }
                }
            },
            getList() {
                _getAllWallet().then((res) => {
                    let walletList = res.extends.filter(item=>{
                        return item.symbol.toLowerCase() != 'usdt'
                    });
                    this.walletList = [...walletList].sort(this.compare("usdt", 'up'))
                    let initObj = this.walletList.find(item => {
                        return item.symbol.toLowerCase() == 'eth'
                    })
                    this.volume = initObj.usable
                    this.pledgeCurrency = initObj.symbol
                });
            },
            debounceFn: debounce(function () {
                this.getLoanParam()
            }, 500),
            getLoanParam(){
                this.errorMsg = ''
                if (this.loanAmount==''){
                    this.$toast(this.$t('请输入借款数量'))
                    return false
                }
                if (this.pledgeAmount == '') {
                    this.$toast(this.$t('请输入质押数量'))
                    return false
                }
                if (this.loanAmount*1 < this.loanAmountMin*1) {
                    this.$toast(this.$t('最小借款数量为', { 'mount': this.loanAmountMin }))
                    return false;
                }
                Axios.getLoanParam({
                    loanAmount: this.loanAmount,
                    pledgeAmount: this.pledgeAmount,
                    pledgeCurrency: this.pledgeCurrency,
                    loanCycle: this.loanCycle
                }).then(res=>{
                    this.closeOut = res.data.closeOut
                    this.pledgeRate = res.data.pledgeRate
                    this.debtAmount = res.data.debtAmount
                    this.interestAmount = res.data.interestAmount
                }).catch(error =>{
                    if (error.code == 10){
                        this.loanAmount = ''
                        this.pledgeAmount = ''
                        this.closeOut = ''
                        this.pledgeRate = ''
                        this.interestAmount = ''
                        this.debtAmount = ''
                        this.errorMsg = this.$t('质押率过高，质押金额不得低于:')+error.msg
                    } else if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){ this.$toast(this.$t(error.msg)); }                    
                })
            },
            addOrder(){
                if (this.loanAmount == '') {
                    this.$toast(this.$t('请输入借款数量'))
                    return false
                }
                if (this.pledgeAmount == '') {
                    this.$toast(this.$t('请输入质押数量'))
                    return false
                }
                if (this.loanAmount*1 < this.loanAmountMin*1) {
                    this.$toast(this.$t('最小借款数量为', { 'mount': this.loanAmountMin }))
                    return false;
                }
                Axios.addOrder({
                    loanAmount: this.loanAmount,
                    pledgeAmount: this.pledgeAmount,
                    pledgeCurrency: this.pledgeCurrency,
                    loanCycle: this.loanCycle
                }).then(res => {
                    this.loanAmount=''
                    this.pledgeAmount = ''
                    this.closeOut = ''
                    this.pledgeRate = ''
                    this.interestAmount = ''
                    this.debtAmount = ''
                    this.$toast(this.$t('借贷数量已发放,请至现货账号查看'));
                    this.getList();
                }).catch(error => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}      
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.pledgeLoan{
    width: 100%;
    box-sizing: border-box;
    .van-popup{
        background: $cont_background;
    }
    .van-action-sheet__header{
        color: $text_color;
    }
    .van-cell{
        background: $cont_background;
        color: $text_color;
        font-size:32px;
    }
    .van-cell-group{
        background: $cont_background;
    }
}
.contentBox {
    padding: 0 32px;
    position: relative;
    overflow: auto;
}
.imgBox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    img{
        width: 100%;
        height: 100%;
    }
}
.content{
    border-radius: 8px;
    padding: 36px 30px 36px 34px;
    position: relative;
    .inputBox {
        .selectedCon{
            flex: 1;
            display: flex;
            align-items: center;
        }
        input {
            flex: 1;
            border: none;
        }
        .right {
            border-left: 1px solid #B8BCC5;
        }
    }
    
}
.slectBox{
    position: absolute;
    left: 0;
    top: 114px;
    width: 100%;
    background: $main_background;
    border-radius: 4px;
    padding: 0px 20px 76px 20px; 
    box-sizing: border-box;
    border: 1px solid $line_color;
    z-index: 2;
    &.slectBoxMax{
        max-height: 574px;
        overflow-y: auto;
    }
}
.item{
    height: 98px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $text_color;
}
.custom {
    width: 44px;
    height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>